<template>
  <el-container>
    <el-header height="80px">校园地理信息系统</el-header>
    <el-container>
      <el-aside width="200px">
        <el-menu
          class="el-menu-vertical-demo"
          @select="select"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-search"></i>
              <span>校园查询</span>
            </template>
            <el-menu-item index="5">
              <i class="el-icon-question"></i>
              <span slot="title">关键字检索</span>
            </el-menu-item>
            <el-menu-item index="6">
              <i class="el-icon-menu"></i>
              <span slot="title">地址查询</span>
            </el-menu-item>
          </el-submenu>
          <el-menu-item index="2">
            <i class="el-icon-picture-outline"></i>
            <span slot="title">全景图</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-position"></i>
            <span slot="title">路线规划</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-main>
        <div id="map"></div>
        <el-dialog title="关键字搜索" :visible.sync="dialogFormVisible">
          <el-form>
            <el-form-item label="关键字" label-width="100">
              <el-input v-model="address" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="search">确 定</el-button>
          </div>
        </el-dialog>
        <el-dialog title="地址搜索" :visible.sync="dialogFormVisible2">
          <el-form>
            <el-form-item label="地址" label-width="100">
              <el-input v-model="address" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible2 = false">取 消</el-button>
            <el-button type="primary" @click="placeSearch">确 定</el-button>
          </div>
        </el-dialog>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        type: 10,
        points: [],
        map: null,
        driving: null,
        panorama: null,
        contextMenu: null,
        stCtrl: null,
        dialogFormVisible: false,
        dialogFormVisible2: false,
        address: ''
      };
    },
    mounted() {
      let map = new BMap.Map('map');
      let point = new BMap.Point(123.240892, 41.753269);
      map.centerAndZoom(point, 16);
      map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放
      map.addControl(new BMap.NavigationControl());
      map.addControl(new BMap.ScaleControl());
      map.addControl(new BMap.OverviewMapControl());
      map.addControl(new BMap.MapTypeControl());
      map.setCurrentCity('沈阳');
      map.addEventListener('click', this.click);
      this.map = map;
    },
    methods: {
      click(e) {
        switch (this.type) {
          case 0:
            this.clickRoute(e.point);
            break;
          case 1:
            this.panorama.setPosition(e.point);
            break;
          default:
            break;
        }
      },
      clickRoute(point) {
        this.points.push(point);

        if (this.driving != null) {
          this.driving.clearResults();
          this.driving = null;
        }
        if (this.points.length == 2) {
          this.driving = new BMap.WalkingRoute(this.map, {
            renderOptions: {
              map: this.map,
              autoViewport: true
            }
          });
          this.driving.search(this.points[0], this.points[1]);
          this.points = [];
        }
      },
      select(index, path) {
        this.map.clearOverlays();
        this.clearPanorama();
        switch (index) {
          case '2':
            this.type = 1;
            this.startPanorama();
            break;
          case '3':
            this.type = 0;
            break;
          case '5':
            this.type = 5;
            this.dialogFormVisible = true;
            break;
          case '6':
            this.type = 6;
            this.dialogFormVisible2=true;
            break;
          default:
            break;
        }
      },
      startPanorama() {
        // 覆盖区域图层测试
        this.titleLayer = new BMap.PanoramaCoverageLayer();
        this.map.addTileLayer(this.titleLayer);
        this.panorama = new BMap.Panorama('map');
        this.panorama.setPov({heading: -40, pitch: 6});
        let stCtrl = new BMap.PanoramaControl(); //构造全景控件
        stCtrl.setOffset(new BMap.Size(20, 40));
        //添加退出右键
        this.map.addControl(stCtrl);//添加全景控件
        this.stCtrl = stCtrl;
        let menu = new BMap.ContextMenu();
        menu.addItem(new BMap.MenuItem('退出全景图', this.removePanorama, 100));
        this.map.addContextMenu(menu);
        this.contextMenu = menu;
        this.map.setPanorama(this.panorama);
      },
      removePanorama() {
        if (this.panorama != null) {
          this.map.getPanorama().hide();
        }
      },
      clearPanorama() {
        if (this.panorama != null) {
          this.map.getPanorama().hide();
          this.panorama = null;
        }
        if (this.contextMenu != null) {
          this.map.removeContextMenu(this.contextMenu);
          this.contextMenu = null;
        }
        if (this.stCtrl != null) {
          this.map.removeControl(this.stCtrl);
          this.stCtrl = null;
        }
        if (this.titleLayer != null) {
          this.map.removeTileLayer(this.titleLayer);
          this.titleLayer = null;
        }
      },
      search() {
        this.dialogFormVisible = false;
        if (this.address != '' && this.address != null) {
          let mPoint = new BMap.Point(123.240892, 41.753269);
          let circle = new BMap.Circle(mPoint, 1000, {
            fillColor: 'blue',
            strokeWeight: 1,
            fillOpacity: 0.3,
            strokeOpacity: 0.3
          });
          this.map.addOverlay(circle);
          let local = new BMap.LocalSearch(this.map, {renderOptions: {map: this.map, autoViewport: false}});
          local.searchNearby(this.address, mPoint, 1000);
        }
      },
      placeSearch(){
        this.dialogFormVisible2=false;
        let myGeo = new BMap.Geocoder();
        const that=this;
        myGeo.getPoint(this.address, function(point){
          if (point) {
            that.map.centerAndZoom(point, 16);
            that.map.addOverlay(new BMap.Marker(point));
          }else{
            alert("您选择地址没有解析到结果!");
          }
        }, "沈阳市");
      }
    }
  };
</script>

<style scoped>
  .el-aside {
    height: calc(100vh - 80px);
  }
  .el-header{
    color: #35E2FF;
    background-color: #0A1A3B;
    line-height: 80px;
    text-align: center;
    font-size: xx-large;
    font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
   border-bottom: 1px solid #4275A8;
  }
  #map {
    width: 100%;
    height: 100%;
  }
  .el-main{
    padding: 0;
  }

</style>
<style>
  .el-aside > ul {
    height: 100%;
  }
  .el-menu{
    color: #35E2FF;
    background-color: #0A1A3B!important;
  }
  .el-menu span,.el-menu i{
    color: #35E2FF;
  }
  .el-submenu,.el-menu-item{
    border-bottom: 1px solid #4275A8;
  }
</style>
